import React, { useState, useEffect } from "react";
import { Sidebar, Toast } from "react-vant";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [active, setActive] = useState<number>(0);
  const [tablist, setTablist] = useState<any>([]);
  useEffect(() => {
    axios.get("/api/cjlist").then((resp: any) => {
      setTablist(resp.data.cjlist);
    });
  }, []);

  return (
    <div>
      <div className="ComComCommonDrugs">
        <div className="LeftComComCommonDrugs">
          <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v);
            }}
          >
            {tablist.length > 0 &&
              tablist.map((v: any, i: any) => <Sidebar.Item title={v.title} />)}
          </Sidebar>
        </div>
        <div className="RightComCommonDrugs">
          {tablist[active]?.children.title.map((v: any, i: any) => (
            <div>{v}</div>
          ))}
        </div>
      </div>
    </div>
  );
};
export default Index;
